<template>
    <div class="main">
        <el-row>
            <el-col :span="8">
                <div class="ga-select">
                    <div class="sp8_co1">
                        <span>待分配项目：{{ waitallot }}</span>
                    </div>
                    <div class="sp8_co2">
                        <el-form style="width: 220px;">
                            <el-form-item label="排序方式：">
                                <el-select v-model="amfrom.maitem" placeholder="请选择" @change="handleSelectChange">
                                    <el-option label="按照比赛项目" value="1"></el-option>
                                    <el-option label="按照比赛组" value="2"></el-option>
                                    <el-option label="按照比赛次" value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
                <div class="main-table">
                    <el-table :data="waitData" height="90vh" :header-cell-style="headClass" highlight-current-row
                        @current-change="handleCurrentChange" ref="myTable">
                        <el-table-column prop="gridName" label="组别" align="center">
                        </el-table-column>
                        <el-table-column prop="sexName" label="性别" align="center">
                        </el-table-column>
                        <el-table-column prop="msidName" label="项目" width="200" align="center">
                        </el-table-column>
                        <el-table-column prop="plcnt" label="人数" align="center">
                        </el-table-column>
                        <el-table-column prop="grcnt" label="组数" align="center">
                        </el-table-column>
                        <el-table-column prop="stageName" label="赛次" align="center">
                        </el-table-column>
                    </el-table>
                </div>
            </el-col>
            <el-col class="sp1" :span="1">
                <div>
                    <!-- <div class="center_btn">
                        <el-button type="info" size="small" @click="allotSelect">选择</el-button>
                    </div> -->
                    <div class="center_btn">
                        <a href="#" @click="rightTopIncrease">
                            <img src="/uploads/button_right_up.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn">
                        <a href="#" @click="rightBottomIncrease">
                            <img src="/uploads/button_right_down.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn" @click="leftTopIncrease">
                        <a href="#">
                            <img src="/uploads/button_left.gif" alt="">
                        </a>
                    </div>
                    <div class="center_btn">
                        <a href="#" @click="resetValue">
                            <img src="/uploads/button_left_day.gif" alt="">
                        </a>
                    </div>
                    <div>
                        <a href="#" @click="allResetValue">
                            <img src="/uploads/button_left_all.gif" alt="">
                        </a>
                    </div>
                </div>
            </el-col>
            <el-col :span="15">
                <el-row>
                    <div class="co15_co1">
                        <span>该场分配项目数：{{ assigned }}</span>
                    </div>
                    <div class="col-2">
                        <el-form>
                            <el-form-item label="比赛日期：">
                                <el-select v-model="gametime" placeholder="请选择">
                                    <el-option v-for="(option, index) in options" :key="index" :label="option.label"
                                        :value="option.value">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="sp15_co3">
                        <el-form-item>
                            <el-select v-model="gamehms" placeholder="请选择" @change="dataSelectChang">
                                <el-option label="上午" value="1"></el-option>
                                <el-option label="下午" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <div class="sp15_co4">
                        <el-form>
                            <el-form-item label="开始时间：">
                                <el-input v-model="begintime"></el-input>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="sp15_co5">
                        <div class="arrbtn">
                            <el-button type="primary" @click="arrangeSchedule">编排</el-button>
                            <el-button type="primary" @click="fieldArrange">场编排</el-button>
                            <el-tooltip class="item" effect="light" content="考虑报名成绩" placement="right-end">
                                <el-checkbox class="col-check" v-model="bpchecked"></el-checkbox>
                            </el-tooltip>
                        </div>
                    </div>
                </el-row>
                <div class="main-table">
                    <el-table :data="alreadyData" height="90vh" highlight-current-row :header-cell-style="headClass"
                        @row-click="rightRowClick">
                        <el-table-column prop="mano" label="序号" width="60" align="center">
                        </el-table-column>
                        <el-table-column prop="gridName" label="组别" align="center">
                        </el-table-column>
                        <el-table-column prop="sexName" label="性别" align="center">
                        </el-table-column>
                        <el-table-column prop="msidName" label="比赛项目" width="200" align="center">
                        </el-table-column>
                        <el-table-column prop="stidName" label="赛次" align="center">
                        </el-table-column>
                        <el-table-column prop="plcnt" label="人数" align="center">
                        </el-table-column>
                        <el-table-column prop="grcnt" label="组数" align="center">
                        </el-table-column>
                        <el-table-column prop="admissions" label="录取" align="center">
                        </el-table-column>
                        <el-table-column prop="gtime" label="分" align="center">
                        </el-table-column>
                        <el-table-column prop="starttime" label="比赛时间" align="center">
                        </el-table-column>
                    </el-table>
                </div>
                <el-dialog title="分配比赛项目" v-model="selectdialogVisible" draggable width="30%">
                    <el-form :model="selectfrom" label-width="120">
                        <el-form-item label="第一天上午：">
                            <el-input v-model="selectfrom.firstnoon"></el-input>
                        </el-form-item>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="上午：">
                                    <el-input v-model="selectfrom.forenoon"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="下午：">
                                    <el-input v-model="selectfrom.afternoon"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item>
                            <el-checkbox v-model="selectfrom.noonselect">第一天上午不安排比赛</el-checkbox>
                        </el-form-item>
                        <el-form-item>
                            <el-checkbox v-model="selectfrom.afselect">最后一天下午不安排比赛</el-checkbox>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary">自动分配</el-button>
                        <el-button type="primary">手工分配</el-button>
                    </div>
                </el-dialog>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            amfrom: {
                maitem: '1'
            },
            assigned: 0,
            waitallot: 0,
            // 选择
            gametime: '',
            options: [],
            gamehms: '1',
            begintime: '08:00:00',
            dataForBackend: {
                startdate: '',
                meridiem: '1',
            },
            // 左边表格
            waitData: [],
            bpchecked: false,
            leftTable: {},
            // 第二张表格
            alreadyData: [],
            // 右边点击选择的数据
            rightTable: null,
            val2Table: null,
            selectdialogVisible: false,
            selectfrom: {
                firstnoon: '09:00',
                forenoon: '09:00',
                afternoon: '14:00',
                noonselect: false,
                afselect: false,
            },
            basafrom: {},
        }
    },
    created() {
        this.getArrangeMatchinfoList();
        this.getAlreadyinfoList();
        this.getGamenameList()
        this.assigned = this.alreadyData.length
    },
    methods: {
        headClass() {
            return { 'background': '#27ae60', 'color': '#FFFFFF' }
        },
        // 查询
        async getArrangeMatchinfoList() {
            try {
                const result = await this.$http.post(this.BACKEND_URL + '/tplan/getmsg');
                if (result.data.code == 0) {
                    this.waitData = result.data.data
                    this.waitallot = this.waitData.length
                    this.waitData.sort(this.customSortByItem)
                    this.$refs.myTable.setCurrentRow(this.waitData[0]);
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            } catch (error) {
                if (error === undefined) {
                    this.$message.error('连接错误-获取数据失败');
                }
            }
        },
        async getAlreadyinfoList() {
            const result = await this.$http.post(this.BACKEND_URL + '/plan/getmsg', this.dataForBackend);
            if (result.data.code == 0) {
                this.alreadyData = result.data.data
                this.assigned = this.alreadyData.length
                this.alreadyData.sort((a, b) => a.mano - b.mano)
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async getGamenameList() {
            const result = await this.$http.post(this.BACKEND_URL + '/meeting/getmsg');
            if (result.data.code == 0) {
                this.basafrom = result.data.data
                this.gametime = this.basafrom.startdate
                this.dataForBackend.startdate = this.gametime
                this.generateOptions(this.basafrom.days);
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        generateOptions(val) {
            const gametime = new Date(this.gametime);
            this.options = Array.from({ length: val }, (_, index) => {
                const currentDate = new Date(gametime);
                currentDate.setDate(gametime.getDate() + index);

                const year = currentDate.getFullYear();
                const month = String(currentDate.getMonth() + 1).padStart(2, '0');
                const day = String(currentDate.getDate()).padStart(2, '0');

                return {
                    label: `${year}-${month}-${day}`,
                    value: `${year}-${month}-${day}`
                };
            });
        },
        allotSelect() {
            this.selectdialogVisible = true
        },
        // 日期选择
        dataSelectChang() {
            if (this.gamehms == '1') {
                this.begintime = '08:00:00'
            } else if (this.gamehms == '2') {
                this.begintime = '14:00:00'
            } else {
                this.begintime = '18:00:00'
            }
        },
        // 左边select排序
        handleSelectChange(val) {
            if (val === '2') {
                this.waitData.sort(this.customSort)
                this.$refs.myTable.setCurrentRow(this.waitData[0]);
            } else if (val === '1') {
                this.waitData.sort(this.customSortByItem)
                this.$refs.myTable.setCurrentRow(this.waitData[0]);
            } else if (val === '3') {
                this.waitData.sort(this.customSortByRaceType)
                this.$refs.myTable.setCurrentRow(this.waitData[0]);
            }
        },
        customSort(a, b) {
            const ageRangeA = parseInt(a.gridName.split('-')[0]);
            const ageRangeB = parseInt(b.gridName.split('-')[0]);

            if (ageRangeA === ageRangeB) {
                // 如果起始年龄相同，则按结束年龄进行排序
                const endAgeA = parseInt(a.gridName.split('-')[1].replace('岁组', ''));
                const endAgeB = parseInt(b.gridName.split('-')[1].replace('岁组', ''));
                return endAgeA - endAgeB;
            } else {
                return ageRangeA - ageRangeB; // 升序排序
            }
        },
        customSortByItem(a, b) {
            if (a.msidName < b.msidName) {
                return -1;
            }
            if (a.msidName > b.msidName) {
                return 1;
            }
            return 0;
        },
        customSortByRaceType(a, b) {
            if (a.stageName === '决赛' && b.stageName === '预赛') {
                return -1;
            } else if (a.stageName === '预赛' && b.stageName === '决赛') {
                return 1;
            } else {
                return 0;
            }
        },
        // 左边表格数据选择
        handleCurrentChange(val) {
            this.leftTable = val
        },
        // 右边表格数据选择
        rightRowClick(row) {
            this.rightTable = row
            this.leftTable.mano = row.mano
        },
        // 右上按钮
        async rightTopIncrease() {
            if (this.leftTable === null) {
                this.$message.error('未选择需要返回分配的项目')
            } else {
                this.leftTable.startdate = this.gametime
                this.leftTable.meridiem = this.gamehms
                this.leftTable.starttime = this.begintime
                const result = await this.$http.post(this.BACKEND_URL + '/plan/addup', this.leftTable)
                if (result.data.code == 0) {
                    this.getArrangeMatchinfoList();
                    this.getAlreadyinfoList();
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            }
        },
        // 右下按钮
        async rightBottomIncrease() {
            if (this.leftTable === null) {
                this.$message.error('未选择需要返回分配的项目')
            } else {
                this.leftTable.startdate = this.gametime
                this.leftTable.meridiem = this.gamehms
                this.leftTable.starttime = this.begintime
                const result = await this.$http.post(this.BACKEND_URL + '/plan/addDown', this.leftTable)
                if (result.data.code == 0) {
                    this.getArrangeMatchinfoList();
                    this.getAlreadyinfoList();
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            }
        },
        // 左分配按钮
        async leftTopIncrease() {
            if (this.rightTable === null) {
                this.$message.error('未选择需要返回分配的项目')
            } else {
                const result = await this.$http.post(this.BACKEND_URL + '/plan/deleteone', this.rightTable)
                if (result.data.code == 0) {
                    this.getArrangeMatchinfoList();
                    this.getAlreadyinfoList();
                    this.rightTable = null
                } else if (result.data.code == 500) {
                    console.log(result.data.msg)
                }
            }
        },
        // button-left按钮
        async resetValue() {
            const result = await this.$http.post(this.BACKEND_URL + '/plan/deleteByday', this.dataForBackend)
            if (result.data.code == 0) {
                this.getArrangeMatchinfoList();
                this.getAlreadyinfoList();
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 全部left按钮
        async allResetValue() {
            const result = await this.$http.post(this.BACKEND_URL + '/plan/deleteAll')
            if (result.data.code == 0) {
                this.getArrangeMatchinfoList();
                this.getAlreadyinfoList();
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        // 编排
        async arrangeSchedule() {
            this.dataForBackend.startdate = null
            this.dataForBackend.meridiem = null
            const result = await this.$http.post(this.BACKEND_URL + '/player/creatMsg', this.dataForBackend)
            if (result.data.code == 0) {
                window.location.reload();
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
        async fieldArrange() {
            const result = await this.$http.post(this.BACKEND_URL + '/player/creatMsg', this.dataForBackend)
            if (result.data.code == 0) {
                this.getArrangeMatchinfoList();
                this.getAlreadyinfoList();
            } else if (result.data.code == 500) {
                console.log(result.data.msg)
            }
        },
    },
    watch: {
        gametime(newVal) {
            this.dataForBackend.startdate = newVal
            this.getAlreadyinfoList()
        },
        gamehms(newVal) {
            this.dataForBackend.meridiem = newVal
            this.getAlreadyinfoList()
        },
        // begintime() {
        //     this.dataForBackend.begintime = newVal
        // }
    },
}
</script>

<style lang="less" scoped>
.main {
    display: block;
    flex: 1;
    flex-basis: auto;
    overflow: auto;
    box-sizing: border-box;
    padding: 20px;

    .main-table {
        border: 1px solid #27ae60;
        height: 90vh;
    }
}

.sp1 {
    display: flex;
    align-items: center;
    justify-content: center;

    .center_btn {
        margin-bottom: 30px;
    }
}

.ga-select {
    display: flex;
}

.sp8_co1 {
    width: 120px;
    height: 45px;
    text-align: left;
    margin-top: 5px;
}

.sp8_co2 {
    flex: 1;
    display: flex;
    justify-content: right;
    flex-wrap: wrap;
}

.co15_co1 {
    width: 150px;
    margin-top: 5px;
}

.col-2 {
    margin-left: 20px;
    width: 210px;
}

.sp15_co3 {
    width: 80px;
    margin-left: 10px;
}

.sp15_co4 {
    width: 170px;
    margin-left: 30px;
}

.sp15_co5 {
    flex: 1;
    text-align: right;
    height: 50px
}

.col-check {
    margin-left: 10px;
}

@media (max-width: 1700px) {
    .arrbtn {
        width: 200px;
    }
}

@media (max-width: 1431px) {
    .ga-select {
        display: inline;
    }
    .sp8_co2{
        display: inline;
    }
}
</style>